import React from 'react'
import AppBar from '../../components/AppBar';
import { Map, Marker } from 'react-amap'
import { getPosition, updatePosition } from '../../api/deliverer'

export class PosUpdate extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            position: {
                lng: 0,
                lat: 0
            }
        }
        this.amapEvents = {
            click: (e) => {
                this.setState({
                    position: e.lnglat
                })
            }
        }
    }

    componentDidMount() {
        getPosition((data) => {
            this.setState({
                position: {
                    lng: data.longitude,
                    lat: data.latitude
                }
            })
        })
    }

    handleSubmit() {
        updatePosition(this.state.position.lng, this.state.position.lat)
    }

    render() {
        return (
            <>
                <AppBar />
                <div id="container" style={{ width: '100%', height: 'calc(100vh - 94px)' }}>
                    <button onClick={this.handleSubmit.bind(this)} className="btn btn-block btn-success">确认选择</button>
                    <Map events={this.amapEvents} zoom={15} center={{ longitude: this.state.position.lng, latitude: this.state.position.lat }}>
                        <Marker position={this.state.position} />
                    </Map>
                </div>
            </>
        )
    }
}